<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding: 0 ; margin: 0;}
			#box{
				width: 400px;
				height: 400px;
				position: relative;
				margin: 200px auto;
				perspective: 800px;
				perspective-origin: center 90px;
			 }
			 .cube{
			 	width: 200px;
			 	height: 200px;
				transform-style: preserve-3d;	 
				animation: play 5s linear infinite;	
			 }
			 .cube div{
			 	width: 200px;
			 	height: 200px;
			 	position: absolute;
			 	left: 0;
			 	top: 0;
			 	opacity: 0.5;
			 }
			 .cube div:nth-child(1){
			 	background: red;
			 	transform: translateZ(100px);
			 }
			 .cube div:nth-child(2){
			 	background: yellow;
			 	transform: translateZ(-100px);
			 }
			 .cube div:nth-child(3){
			 	background: blue;
			 	transform:rotateY(90deg) translateX(-100px);
			 	transform-origin: 0 100px;
			 }
			 .cube div:nth-child(4){
			 	background: green;
			 	transform:rotateY(90deg) translateX(100px);
			 	transform-origin: 200px 100px;
			 }
			 .cube div:nth-child(5){
			 	background: cyan;
			 	transform:rotateX(90deg) translatey(-100px);
			 	transform-origin: 100px 0px;
			 	
			 }
			 .cube div:nth-child(6){
			 	background: pink;
			 	transform:rotateX(90deg) translatey(100px);
			 	transform-origin: 100px 200px;
			 }
			 @keyframes play{
			 	from{transform: rotateY(0);}
			 	to{transform: rotateY(360deg);}
			 }
		</style>
	</head>
	<body>
		<div id="box">
			<div class="cube">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
</html>
